<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="1200" height="2400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        var img = Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G30x30.png');

        window.Sprite1 = $app.add({
            style: {
                zIndex: 2,
            },
            events: {
                click: function () {
                    console.log('Sprite1 trigger.');
                }
            },
        });

        window.Sprite2 = Sprite1.add({
            style: {
                width: 10, height: 20
            },
            events: {
                click: function () {
                    console.log('Sprite2 trigger.');
                }
            },
        });

        window.Sprite3 = Sprite2.add({
            name: 'Sprite3',
            style: {
                left: 500, top: 500,
            },
            events: {
                click: function () {
                    console.log('Sprite3 trigger.');
                }
            },
        });

        window.Sprite4 = Sprite3.add({
            name: 'Sprite4',
            content: {
                img: img,
            },
            style: {
                locate: 'lt',
            },
            events: {
                click: function () {
                    console.log('Sprite4 trigger.');
                }
            },
        });

        window.Sprite5 = $app.add({
            name: 'Sprite5',
            content: {
                img: img,
            },
            style: {
                left: 450, top: 450,
                width: 120, height: 120,
                locate: 'lt',
            },
            events: {
                click: function () {
                    console.log('Sprite5 trigger.');
                }
            },
        });
    </script>
</body>

